<template>
  <div class="app">
    <div class="header">
      <div>
        <img src="../assets/homeimg/滑动左.png" />
        <span>大象听力训练</span>
      </div>
    </div>
    <div class="min">
      <div class="biaoti">听力记忆-数字歌</div>
      <div class="neir">
        <p v-for="(txt, index) in text" :key="index">
          {{ txt.text }}
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: [
        {
          text: "我最美，我最帅，我的记忆最厉害。"
        },
        {
          text: " 记词语，记文章，我的速度是最快。"
        },
        {
          text: "记单词，记公式，随学随用才是好。"
        },
        {
          text: "记完后，常回想，记清记稳最重要。"
        },
        {
          text: "大脑像，常回放，一睁一闭画面俏。"
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped="scoped">
.header {
  width: 100%;
  text-align: center;
  height: 3.125rem;
  line-height: 3.125rem;
  position: relative;
  border-bottom: 1px solid #dcdcdc;
  color: #333333;
  font-size: 1.25rem;
  img {
    width: 0.625rem;
    height: 1.125rem;
    position: absolute;
    left: 1rem;
    bottom: 0.875rem;
  }
}
.biaoti {
  width: 100%;
  height: 4rem;
  line-height: 4rem;
  text-align: center;
  font-size: 1rem;
}
.neir p {
  text-align: center;
  height: 1.375rem;
  font-size: 0.75rem;
  color: #333333;
}
</style>
